/**
 * desc:modal框展示找家纺商品信息html
 * @item {object} 商品的信息
 * @ismark {boolean} 是否展示已售罄，下架等遮罩
 * @onClick {func} 点击事件
 *
 */
 import React from 'react';
 import CommonZjfImg from '@/components/CommonImg/ZifComponent';
 import CommonPlatImg from '@/components/CommonImg/PlatformComponent';
 import CommonTag from '@/components/CommonTag';
 import { formatAmount } from '@/utils/utils.jsx';
 import { Tooltip } from 'antd';
 import styles from './index.module.less';
 
 export default ({ item = {} }) => {
	 //1是网店商品，2是系统商品
	 const { goodsName, goodsId, goodsStorage, goodsImage, goodsState, storeId, isCarefullySelected, spuName, goodsNum, type = 1, vipPrice, goodsPrice, deliverType } = item;
 
		 //是否是系统商品
		 const isSysGoods = type == 1 ? true : false;
 
	 const storeName = isSysGoods ? '系统商品' : item.storeName;
 
	 const price = vipPrice || goodsPrice;
 
	 return (
		 <div className={styles.goodsBox} key={item.goodsId}>
			 <div className={styles.imgWrap}>
				 {
					 isSysGoods ? 
					 <CommonPlatImg img={goodsImage} size="84" isCloudIcon={isCarefullySelected} isMask={true} goodsState={goodsState} goodsStorage={goodsStorage}  />
					 :
					 <CommonZjfImg img={goodsImage} storeId={storeId} size="84" isCloudIcon={isCarefullySelected} isMask={true} goodsState={goodsState} goodsStorage={goodsStorage} />
				 }
			 </div>
			 <div className={styles.msgBox}>
				 <Tooltip title={storeName}>
					 <span className="text-overflow common-color3">
						 【{storeName}】
					 </span>
				 </Tooltip>
				 <Tooltip title={goodsName}>
					 { 
						 isSysGoods ? 
						 <span className="common-color4">{goodsName}</span>
						 :
						 <a className="text-overflow common-color2" target="_blank" href={`${GOODS_HREF}${goodsId}`}>
							 {goodsName}
						 </a>
					 }
				 </Tooltip>
				 <Tooltip title={spuName}>
					 <span
						 className="textOverflowMultiOne"
						 style={{ whiteSpace: 'pre-wrap' }}
					 >
						 {spuName}
					 </span>
				 </Tooltip>
				 <Tooltip title={item.goodsSize}>
					 <span className="text-overflow common-color5">
						 尺码：{item.goodsSize}
					 </span>
				 </Tooltip>
				 <Tooltip title={item.goodsColor}>
					 <span className="text-overflow common-color5">
						 颜色：{item.goodsColor}
					 </span>
				 </Tooltip>
				 <span className="common-color9">
					 ￥{formatAmount(price)}
					 <span className="common-color5" style={{ marginLeft: '12px' }}>
						 x{item.goodsNum}
					 </span>
				 </span>
				 <span className="common-color9">
					 { [1,2].includes(deliverType) && <CommonTag type="nahuo" /> }
					 { deliverType == 3 && <CommonTag type="zifa" /> }
					 { deliverType == 4 && <CommonTag type="cjzf" /> }
				 </span>
			 </div>
		 </div>
	 );
 };
 